<template>
  <div class="publish-container">
    <el-card>
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form ref="form" :rules="rules" :model="article" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input
            placeholder="请输入文章标题"
            v-model.trim="article.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content" class="editor">
          <quillEditor v-model="article.content" :options="editorOption" />
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="article.cover.type">
            <!-- 根据后端接口约定 -->
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 选择素材 -->
        <!-- 根据article.cover.type值决定选择素材数量 -->
        <el-form-item class="sel-img" v-if="article.cover.type > 0">
          <sel-img
            :imgUrl.sync="article.cover.images[i]"
            v-for="(img, i) in article.cover.type"
            :key="img"
          />
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="article.channel_id" placeholder="请选择活动区域">
            <el-option
              v-for="channel in channels"
              :key="channel.id"
              :label="channel.name"
              :value="channel.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addArticle(false)">发表</el-button>
          <el-button @click="addArticle(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getArticleChannels, getArticleDetail, updateArticle } from '@/api/article'
// 引入编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import SelImg from '@/views/addArticle/components/selectImg'
const defaultOptions = {
  // theme: 'snow',
  // boundary: document.body,
  // modules: {
  //   toolbar: [
  //     ['bold', 'italic', 'underline', 'strike'],
  //     ['blockquote', 'code-block'],
  //     [{ header: 1 }, { header: 2 }],
  //     [{ list: 'ordered' }, { list: 'bullet' }],
  //     [{ script: 'sub' }, { script: 'super' }],
  //     [{ indent: '-1' }, { indent: '+1' }],
  //     [{ direction: 'rtl' }],
  //     [{ size: ['small', false, 'large', 'huge'] }],
  //     [{ header: [1, 2, 3, 4, 5, 6, false] }],
  //     [{ color: [] }, { background: [] }],
  //     [{ font: [] }],
  //     [{ align: [] }],
  //     ['clean'],
  //     ['link', 'image']
  //   ]
  // },
  placeholder: '请输入文章内容...'
  // readOnly: false
}
export default {
  components: {
    quillEditor,
    SelImg
  },
  data () {
    return {
      channels: [],
      article: {
        title: '', // 文章标题
        content: '', // 文章内容
        cover: {
          type: 0, // 封面图片的张数
          images: [] // 封面的地址
        },
        channel_id: '' // 频道id
      },
      // 验证规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在5到30之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, message: '最少20个字', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择文章频道', trigger: 'blur' }
        ]
      },
      editorOption: defaultOptions
    }
  },
  created () {
    this.getChannels()
    this.getDetail()
  },
  methods: {
    // 获取文章详情
    async getDetail () {
      const { id } = this.$route.params
      const { data: { data } } = await getArticleDetail(id)
      // console.log(data)
      this.article = data
    },
    async getChannels () {
      try {
        const { status, data: { data } } = await getArticleChannels()
        if (status === 200) {
          this.channels = data.channels
        }
      } catch (error) {
        console.log(2, error)
      }
    },
    // 修改文章
    addArticle (draft) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const { id } = this.$route.params
            await updateArticle(id, { draft }, this.article)
            this.$message({
              type: 'success',
              message: '修改文章成功！'
            })
            this.$router.push('/articles')
          } catch (error) {
            this.$message({
              type: 'warning',
              message: '修改文章失败！'
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.editor {
  /deep/ .el-form-item__content {
    line-height: normal;
  }
}
// 处理图片选择框水平显示
.sel-img /deep/ .el-form-item__content {
  display: flex;
  .selimg-container {
    margin-right: 20px;
  }
}
</style>
